<script setup>
import { ref, computed } from 'vue'
import api from './api.js'
import {CommonPage} from "@/components/index.js";

const typeList = [
  {
    label: 'midi',
    value: 'mid',
  },
  {
    label: 'mml',
    value: 'mml',
  },
]
const tagList = [
  {
    label: '21键',
    value: '21键',
  },
  {
    label: '36键',
    value: '36键',
  },
]

const model = ref({
  type: typeList[0].value,
  tag: tagList[0].value,
})

const fileList = ref([])

const uploadRef = ref(null)

const accept = computed(() => {
  if (model.value.type === 'mid') {
    return '.mid'
  } else if (model.value.type === 'mml') {
    return '.mml,.txt'
  }
})

function handleUploadClick() {
  if (fileList.value.length > 0) {
    uploadRef.value?.submit()
  } else {
    $message.error('请选择文件')
  }
}

function onBeforeUpload({ file }, type) {
  if (type === 'mid') {
    if (file.file?.type !== 'audio/midi' && file.file?.type !== 'audio/mid' && !file.name.endsWith('.mid')) {
      $message.error('只能上传mid文件')
      return false
    }
    fileList.value.push(file)
  } else if (type === 'mml') {
    if (!file.name.endsWith('.mml') && !file.name.endsWith('.txt')) {
      $message.error('只能上传mml文件')
      return false
    }
    fileList.value.push(file)
  }

  return true
}

async function handleUpload({ file, onFinish }, type) {
  if (!file) {
    $message.error('请选择文件')
  }

  try {
    $message.loading('上传中...', { key: 'upload' })
    if (type === 'mid') {
      await api.uploadMidi({
        file: file.file,
        name: file.name.replaceAll('.mid', '')
      })
    } else {
      const source = await file.file.text()
      if (!source) {
        $message.error('mml 内容不能为空')
        return
      }
      await api.uploadMml({
        source: source.trim(),
        name: file.name.replaceAll('.mml', '')
      })
    }

    $message.success('上传成功', { key: 'upload' })
  } catch (e) {
    $message.destroy('upload')
  } finally {
    fileList.value = []
    onFinish()
  }
}
</script>

<template>
  <CommonPage>
    <n-upload
      ref="uploadRef"
      class="mx-auto w-[75%] p-20 text-center"
      :custom-request="(e) => handleUpload(e, model.type)"
      :accept="accept"
      :file-list="fileList"
      :show-file-list="true"
      :default-upload="false"
      @before-upload="(e) => onBeforeUpload(e, model.type)"
    >
      <n-upload-dragger>
        <div class="h-150 f-c-c flex-col">
          <i class="i-mdi:upload mb-12 text-68 color-primary" />
          <n-text class="text-14 color-gray">选择曲谱类型后，点击或者拖动文件到该区域来上传</n-text>
        </div>
      </n-upload-dragger>
    </n-upload>

    <n-form label-placement="left" label-align="right" class="mx-auto mt-50 justify-center" inline>
      <n-form-item label="曲谱类型" class="!mr-40 !w-200">
        <n-select v-model:value="model.type" :options="typeList" />
      </n-form-item>
      <n-form-item label="标签" class="!w-200">
        <n-select v-model:value="model.tag" :options="tagList" />
      </n-form-item>
    </n-form>
    <n-button
      class="mx-auto mt-20 !w-120"
      type="primary"
      size="large"
      round
      block
      @click="handleUploadClick"
    >
      上传
    </n-button>
  </CommonPage>
</template>

<style scoped lang="less"></style>
